<template>
  <a-tree
    ref="tree"
    v-model:expanded-keys="expandedKeys"
    v-model:selected-keys="selectedKeys"
    block-node
    size="large"
    :data="treeData"
    :load-more="loadMore"
    default-expand-all
    class="tree"
    @select="nodeClick"
  >
    <template #title="nodeData">
      <a-input
        v-if="nodeData.key === renameKey"
        ref="renameInput"
        v-model="treeRenameValue"
        v-focus
        :style="{ width: '100%' }"
        @blur="renameFolderRequest(nodeData, renameInput)"
      />
      <div
        v-else
        style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
        >{{ nodeData.title }}</div
      >
    </template>
    <template #icon>
      <img
        style="width: 16px"
        src="@/assets/images/file-manager/folder.png"
        alt=""
      />
    </template>
    <template #extra="nodeData">
      <file-tree-buttons
        :node-data="nodeData"
        :popup-container="dropdown"
      ></file-tree-buttons>
    </template>
  </a-tree>
</template>

<script lang="ts" setup>
  import useFileManageStore from '@/store/modules/file-manage/index';
  import { storeToRefs } from 'pinia';
  import { inject, Ref, ref } from 'vue';
  import { FileAndFolderNodeMessage } from '@/api/tree-folder';
  import FileTreeButtons from './buttons-tree-file.vue';
  import { renameFolderRequest } from '../hooks/dropdow-events';

  defineProps({
    dropdown: {
      type: Element,
    },
  });

  const store = useFileManageStore();
  const { treeData, expandedKeys, selectedKeys, renameKey, treeRenameValue } =
    storeToRefs(store);

  const projectId: Ref<string> | undefined = inject('projectId');

  const renameInput = ref();

  // 自动聚焦指令
  const vFocus = {
    mounted(el: Element) {
      const input = el.getElementsByTagName('input')[0];
      input.focus();
    },
  };

  // 初始化treeData
  store.initTreeData(projectId?.value || '');

  // 自动点开Wip文件夹
  store.setCurrentFolder(store.treeData[0]);

  // 点击树节点事件
  const nodeClick = (selectedNodes: (string | number)[], nodeData: any) => {
    store.setCurrentFolder(nodeData.node);
  };

  // 动态加载子节点
  const loadMore = async (nodeData: FileAndFolderNodeMessage) => {
    await store.getTreeChild(nodeData, false);
  };
</script>

<style lang="less" scoped>
  .spin {
    width: 100%;
    height: 100%;
  }
  .icon-more-vertical {
    position: absolute;
    right: 8px;
    font-size: 12px;
  }
  :deep(.arco-tree-node-custom-icon) {
    display: flex;
  }
  :deep(.arco-tree-node) {
    border-left: 24px solid white;
    border-right: 24px solid white;
    .arco-icon-more-vertical {
      opacity: 0;
    }
  }
  :deep(.arco-tree-node:hover),
  :deep(.arco-tree-node-selected) {
    border-left: 24px solid rgb(235, 240, 255);
    border-right: 24px solid rgb(235, 240, 255);
    background-color: rgb(235, 240, 255);
    .arco-icon-more-vertical {
      opacity: 1;
    }
  }
  :deep(.arco-tree-node-title:hover) {
    background-color: inherit;
  }
  :deep(.arco-tree-node-title) {
    flex-shrink: 1;
    overflow: hidden;
  }
  :deep(.arco-tree-node-title-text) {
    flex-shrink: 1;
    width: 100%;
    overflow: hidden;
  }
</style>
